/* Sticky NavBar */
.navbar.sticky-top {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 1020; /* Adjust z-index as needed to ensure navbar is on top */
}

/* NavBar Link Hover Effect */
.navbar-nav .nav-link {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
    background-color: #0056b3; /* Darker shade for hover/active */
    color: #fff;
}/* Améliorations globales */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police plus moderne */
    color: #333; /* Couleur de texte plus douce */
    background-color: #f4f4f4; /* Couleur de fond globale plus claire */
}

/* Sticky NavBar */
.navbar.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020; /* Assurez-vous que la navbar est toujours au-dessus */
    transition: background-color 0.3s ease; /* Transition fluide pour le changement de couleur */
}

.navbar, .navbar-toggler {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ajoute de l'ombre pour une meilleure profondeur */
}

/* NavBar Link Hover Effect */
.navbar-nav .nav-link {
    transition: color 0.3s ease-in-out; /* Transition plus fluide pour les liens */
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
    background-color: #0056b3;
    color: #fff;
    border-bottom: 3px solid #fff; /* Ajoute un indicateur visuel pour le lien actif/survolé */
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Responsive NavBar */
@media (max-width: 992px) {
    .navbar-nav .nav-link {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Ajoute une séparation entre les liens */
    }
    .navbar-collapse {
        padding: 1rem 2rem; /* Espace supplémentaire pour les éléments du menu rétractable */
    }
}

/* Styles spécifiques pour les sections de contenu */
#mission-vision, #history {
    padding: 4rem 0;
    background-color: #fff; /* Contraste avec le fond global */
    border-radius: 8px; /* Bordures arrondies pour les sections */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre subtile pour la profondeur */
    margin-bottom: 2rem; /* Espacement entre les sections */
}

/* Styles du carrousel améliorés */
#teamCarousel .carousel-inner {
    max-width: 90%; /* Réduction de la largeur pour une meilleure intégration */
    margin: auto; /* Centre le carrousel */
}

#teamCarousel .carousel-item img {
    max-height: 400px;
    object-fit: cover; /* Assure une couverture complète de l'espace */
    border-radius: 5px; /* Adoucit les coins des images */
}

/* Ajoute une animation de survol pour les images du carrousel */
#teamCarousel .carousel-item:hover img {
    transform: scale(1.05); /* Zoom léger sur les images au survol */
    transition: transform 0.3s ease; /* Animation fluide */
}

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.6); /* Rend le texte plus lisible sur les images */
}

/* Amélioration de la visibilité des contrôles du carrousel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #007bff; /* Assure que les flèches sont visibles */
    border-radius: 50%; /* Rend les flèches circulaires */
    width: 40px; /* Ajuste la taille des flèches */
    height: 40px; /* Ajuste la taille des flèches */
}


/* Smooth Scrolling for Anchor Links */
html {
    scroll-behavior: smooth;
}

/* Responsive NavBar for Mobile Screens */
@media (max-width: 992px) {
    .navbar-nav {
        margin-top: 1rem;
    }
    .navbar-toggler {
        margin-right: 0;
    }
    .navbar-collapse {
        background-color: #007bff; /* Same as navbar color for a unified look */
    }
}

/* Optional: Animated hamburger icon */
.navbar-toggler {
    border: none;
    outline: none;
}

.navbar-toggler .navbar-toggler-icon {
    background-image: url("path-to-your-hamburger-icon"); /* Replace with your image path */
}

.navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url("path-to-your-hamburger-icon"); /* Replace with your image path */
}








/* Add some shadow for depth and change the background color for a solid look */
.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #007bff !important;
  }
  
  /* Change the font style and padding for a cleaner appearance */
  .navbar-nav .nav-link {
    font-weight: 500;
    padding: 1.25rem 1rem;
  }
  
  /* A visual cue for the active section could be a border bottom */
  .navbar-nav .nav-link.active,
  .navbar-nav .nav-link:hover {
    border-bottom: 3px solid #fff;
  }
  
  /* Improved mobile responsiveness */
  @media (max-width: 991px) {
    .navbar-collapse {
      background-color: #007bff;
      padding: 1rem 2rem;
    }
  
    .navbar-nav .nav-link {
      padding: 0.25rem 1rem;
      margin: 0.5rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
  }
  
  /* Sticky Navbar */
  .navbar.fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
  }

  


  #mission-vision {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 4rem 0;
}

#mission-vision h2 {
    margin-bottom: 2rem;
}

/* Carousel Styling */
#teamCarousel {
    max-width: 600px;
    margin: 0 auto; /* This will center the carousel */
}

.carousel-item {
    padding: 2rem;
}


#history {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 4rem 0;
}

#history h2 {
    margin-bottom: 2rem;
}

/* Amélioration des boutons de navigation du carrousel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(100%); /* Rend les flèches plus visibles */
}

/* Style pour les boutons génériques */
.btn-custom {
    background-color: #007bff; /* Couleur de fond */
    color: #ffffff; /* Couleur du texte */
    border-radius: 20px; /* Bordures arrondies */
    padding: 10px 20px; /* Espacement */
    transition: transform 0.3s ease; /* Transition pour l'effet de survol */
}

.btn-custom:hover {
    transform: scale(1.1); /* Légère augmentation de la taille au survol */
}

/* Encadrement pour les images du carrousel */
.carousel-item img {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Ombre pour ajouter de la profondeur */
    border-radius: 10px; /* Bordures arrondies pour les images */
}

/* Amélioration de la visibilité du texte sur les images du carrousel */
.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent pour une meilleure lecture */
    border-radius: 5px; /* Bordures arrondies pour les légendes */
    padding: 10px; /* Padding autour du texte */
}

/* Ajustements du carrousel */
#teamCarousel .carousel-inner {
    max-width: 70%; /* Ajustez cette valeur selon le besoin */
    margin: auto; /* Centre le carrousel */
}

#teamCarousel .carousel-item img {
    max-height: 400px; /* Ajustez la hauteur maximale des images */
    object-fit: cover; /* S'assure que les images couvrent l'espace sans perdre leur aspect ratio */
}

/* Effets de survol sur les liens de la navbar */
.navbar-nav .nav-link {
    transition: color 0.3s ease-in-out;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
    color: #FFD700; /* Or ou autre couleur de votre choix */
}

/* Animation d'entrée pour les sections */
@keyframes fadeInUp {
    from {
        transform: translate3d(0, 40px, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

section {
    animation: fadeInUp 1s ease-out;
    visibility: visible !important;
}